<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>设置推荐</title>
    <link th:include="fragment/import :: import">
    <link rel="stylesheet" th:href="@{/static/css/admin.css}">
</head>
<body>
<div class="layui-container">
    <div class="layui-card">
        <form class="layui-form" action="">
            <input type="hidden"
                   name="${_csrf.parameterName}"
                   value="${_csrf.token}"/>
            <div class="layui-form-item select-input">
                <div class="layui-form-label recommend-because">选择文章</div>
                <div class="layui-input-block">
                    <select name="id" lay-verify="" lay-search id="articleName" lay-filter="articleTitle">
                        <option value="010">layer</option>
                        <option value="021">form</option>
                        <option value="0571" selected>layim</option>
                    </select>
                </div>
                <div class="clear"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label recommend-because">作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;者</label>
                <div class="layui-input-block">
                    <span id="recommend-article-title">无</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label recommend-because">推荐理由</label>
                <div class="layui-input-block">
                    <input type="text" name="recommendedReason" required  lay-verify="required" placeholder="请输入推荐理由 " autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label recommend-because">展示图片</label>
                <div class="layui-upload layui-input-block my-img-upload">
                    <div class="select-img" id="uploadImg">
                        <span>+</span>
                    </div>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="imgShow">
                        <p id="demoText"></p>
                    </div>
                </div>
                <input type="hidden" id="imgSrc" name="indexShowImageUrl">
                <input type="hidden" name="ids" id="recommendId">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" id="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>


    </div>
</div>

</body>
<script type="text/javascript">
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function(e, xhr, options) {
        xhr.setRequestHeader(header, token);
    });
</script>
<script>
    $(document).ready(function () {
        LayuiCreateSelect('articleName','/admin/recommend/ArticleRecommend/getList')
    });
    function LayuiCreateSelect(selectId,url,value) {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $(document).ajaxSend(function(e, xhr, options) {
            xhr.setRequestHeader(header, token);
        });
        $.post(url,function (data) {
            //动态化选择框中的数据
            if(selectId.indexOf("#")!=0){
                selectId = '#'+selectId;
            }
            $(selectId).empty();
            $(selectId).append("<option value=''>请选择</option>");
            var articleData =  eval('(' + data + ')');
            //遍历后台数据
            $.each(articleData,function (n,value) {
                $(selectId).append("<option value='"+value.id+"'>"+value.title+"</option>");
            });

            layui.use('form',function () {
                var form = layui.form;
                if(value!=undefined && value!=null && value!=''){
                    $(selectId).val(value);
                }
                form.render();
            });
        });
    }
</script>
<script>
    //Demo
    layui.use(['form','upload','table'],function(){
        var form = layui.form
                ,upload = layui.upload
                ,table = layui.table;
        var articleRId = 0;
        form.on('select(articleTitle)', function(data){
            var articleId = data.value;
            if(!articleId){
                $("#recommend-article-title").text("无");
                $("#recommendId").val(null);
                return;
            }else {
                /*使用ajax请求获得当前文章的作者*/
                $.ajax({
                    url:"/admin/recommend/articleRecommend/getTitle/"+articleId
                    ,method:'post'
                    ,async:false
                    ,success:function (data) {
                        var writer = JSON.parse(data);
                        if(writer.error!=null){
                            layer.msg("该文章已推荐，请勿重复推荐！");
                            articleRId = writer.error;
                        }
                        $("#recommend-article-title").text(writer.title);
                        $("#recommendId").val(articleId);
                    }
                })
            }
        });


        //监听提交
        form.on('submit(formDemo)', function(data){
            if(data.field.id == articleRId){
                layer.msg("请勿重复推荐!");
                return false;
            }
            $.ajax({
                url:'/admin/recommend/articleRecommend/articleInf',
                method:'post',
                data:data.field,
                dataType:'JSON',
                success:function(data){
                    if(data.code='0'){
                        parent.closeIframe(res.msg);
                    }
                    else
                        alert(data.msg);
                },
                error:function (data) {

                }
            });
            var index = parent.layer.getFrameIndex(window.name);
            setTimeout(function(){parent.layer.close(index)}, 1000);
            layer.msg("提交成功");
            return false;
        });
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadImg'
            ,url:'[(@{/admin/recommend/recommendInformation/imgUpload})]?[(${_csrf.parameterName})]=[(${_csrf.token})]'
            ,data:{
                id:function () {
                    return $("#recommendId").val();
                }
            }
            ,before: function(obj){
                //预读本地文件示例，不支持ie8

            }
            ,choose:function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    var filePath = "D:\\xianyan\\recommend\\";
                    var fileName = file.name;
                    var id = $("#recommendId").val();
                    $('#imgShow').attr('src', result); //图片链接（base64）
                    $('#imgSrc').attr('value',filePath+id+fileName.substring(fileName.lastIndexOf("."),fileName.length));//设置属性
                    $('#imgShow').attr('class', 'show-img'); //图片链接（base64）
                });
            }
            ,auto:false
            ,bindAction:'#submit'
            ,size:'10240kb'
            ,done: function(res){
                console.log(res);
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

    });
</script>
</html>